<template>
<div class="body">
<!--  头部开始-->
  <el-header class="dinglang-shang">
    <div id="dinglang-d1">
      <el-dropdown size="small" split-button type="danger">
        <i class="el-icon-location"></i>France
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <i class="el-icon-user-solid">登录</i>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span style="color:white; margin-left: 10px"><i class="el-icon-phone">+ LeeJiEun518 </i></span>
    </div>
    <div id="dinglang-d2">
      <router-link to="/" style="color: white">
        <span><i class="el-icon-shopping-cart-full">购物车</i></span>
      </router-link>
      <router-link to="/"  style="color: white">
        <span style="margin-left: 10px;"><i class="el-icon-s-custom">登录</i></span>
      </router-link>
      <el-input style="margin-left: 10px; border-radius: 5px;border: 1px solid #7c001e;width:350px" placeholder="我要查找...(例如:petrus、Yquem等)">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
  </el-header>
  <!--  头部结束-->
<!--  中部开始-->
  <el-main  style="margin-top: 200px">

    <div class="cen">
      <div style="margin: -30px 0 30px;padding: 20px 0 ">
                    <span>
                        <a href="/" id="n1">主页 </a>
                         <span>/ 创建一个账户</span>
                    </span>
      </div>
      <h1 style="margin: 0 0 17px;padding: 0 0 11px ">
        <span>创建一个账户</span>
      </h1>
      <div style="background-color: #f0f0f0">
        <i class="el-icon-question">已经有一个账户吗?</i>
        <a href="index.html" style="color: black">反而请登录</a>
      </div>
      <div style="margin-top: 10px">
        <el-row style="margin-bottom: 8px">
          <el-col span="4">
            <span>称呼</span>
          </el-col>
          <el-col span="20">
            <el-radio v-model="radio" label="1">M.</el-radio>
            <el-radio v-model="radio" label="2">Mme</el-radio>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="4" style="margin-top: 8px">
            <span>用户名</span>
          </el-col>
          <el-col span="20">
            <el-form>
              <el-form-item>
                <el-input placeholder="请输入用户名"></el-input>
                <p style="font-size: 50%;margin: 0;padding: 0">只允许使用字母和数字</p>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="4" style="margin-top: -5px">
            <span>密码</span>
          </el-col>
          <el-col span="20">
            <el-form>
              <el-form-item style="margin-top: -20px">
                <el-input type="password" placeholder="请输入密码"></el-input>
                <p style="font-size: 50%;margin: 0;padding: 0">只允许使用字母,数字和.*/</p>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="4" style="margin-top: -5px">
            <span>昵称</span>
          </el-col>
          <el-col span="20">
            <el-form>
              <el-form-item style="margin-top: -23px">
                <el-input placeholder="请输入昵称"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="4" style="margin-top: 10px">
            <span>手机号码</span>
          </el-col>
          <el-col span="20">
            <el-form>
              <el-form-item style="margin-top: -2px">
                <el-input placeholder="请输入手机号码"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="4" style="margin-top: 8px">
            <span>邮箱</span>
          </el-col>
          <el-col span="20">
            <el-form>
              <el-form-item>
                <el-input placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </el-form>
            <el-form>
              <el-form-item>
                <el-button type="primary">注册</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-main>
  <!--  中部结束-->
<!--  底部开始-->
  <el-footer style="margin: 0;padding: 0">
    <el-footer style="height: 280px;padding: 50px 0">
      <div style="margin: 0 auto">
        <div class="center" style="text-align: center;color: #666;background-color: white ;">
          <el-row>
            <el-col span="8">
              <img src="imgs/transport.png">
              <p style="color:maroon;">TRANSPORT</p>
              <p style="font-size: 5px">Our wines are shipped into appropriate boxes offering<br>great protection. All of our
                shipment are fully insured for<br>100% of the value of the merchandise<br>(breakerage, loss).</p>
            </el-col>
            <el-col span="8">
              <img src="imgs/services.png">
              <p style="color:maroon;">SERVICES</p>
              <p style="font-size: 5px">You can reach us at contact@finestwine.com or by<br>phone +33 556 680 545.
                We are open from 9:00 am to<br>12:00am and 2:00 pm to 7:00 pm (Paris time).</p>
            </el-col>
            <el-col span="8">
              <img src="imgs/payment.png">
              <p style="color: maroon">PAYMENT</p>
              <p style="font-size: 5px">Secured payment by credit card (Visa or Mastercard),<br>Paypal or bank transfer.</p>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-footer>

    <el-footer style="height: 140px;background-color: orange;padding: 50px 0">

      <div class="center" style="text-align: center;color: white">
        <el-row>
          <el-col span="4">
            <i class="el-icon-message" style="font-size: 50px;float: right;
                        margin-top: -5px;margin-right: -30px"></i>
          </el-col>
          <el-col span="8">
            <div style="margin: 0;">
              SIGN UP TO NEWSLETTER
            </div>
            <div style="margin: 0;font-size: 8px">
              & BE THE FIRST TO GET OUR BESTS DEALS
            </div>
          </el-col>
          <el-col span="12">
            <el-input type="text" placeholder="您的用户名" clearable
                      style="width: 300px;float:left;"></el-input>
            <el-button type="info">Subscribe!</el-button>
          </el-col>
        </el-row>
      </div>
    </el-footer>
    <el-footer style="height: 350px;background-color: #2f3234;padding:50px 0">
      <div class="center" style="text-align: center;color: #666">
        <el-row>
          <el-col span="6">
            <div style="text-align: left">
              <h3 style="color: white">Accueil</h3>
              <p class="pp">Bordeaux</p>
              <p class="pp">Burgundy</p>
              <p class="pp">Rhone</p>
              <p class="pp">Spiritueux</p>
              <p class="pp">Champagne</p>
              <p class="pp">Other Region</p>
              <p class="pp">Vintages</p>
            </div>
          </el-col>
          <el-col span="6">
            <div style="text-align: left">
              <h3 style="color: white">Information</h3>
              <p class="pp">联系我们</p>
              <p class="pp">Mentions légales</p>
              <p class="pp">Conditions d'utilisation</p>
              <p class="pp">站点地图</p>
            </div>
          </el-col>
          <el-col span="6">
            <div style="text-align: left">
              <h3 style="color: white">My account</h3>
              <p class="pp">历史订单</p>
              <p class="pp">地址</p>
              <p class="pp">身份</p>
            </div>
          </el-col>
          <el-col span="6">
            <div style="text-align: left">
              <h3 style="color: white">Contact us</h3>
              <i class="el-icon-location-outline" style="font-size: 22px;color: white"></i>
              <p class="pp">太原学府中心</p>
              <i  id="ii" class="el-icon-mobile" style="font-size: 22px;">
                <span  class="ii1" style="">Hotline:<span style="color:white;"> 0000-000-000-000</span></span>
              </i>
              <i class="el-icon-message" style="color: white;font-size: 29px;">
                                <span class="ii1">Email:
                                    <span style="color: white">xxxxxx.com</span>
                                </span>
              </i>
            </div>
          </el-col>
        </el-row>
      </div>

    </el-footer>
  </el-footer>
<!--  底部结束-->
</div>
</template>

<script>
export default {
  name: "RegView"
}
</script>

<style scoped>
.body{
  margin: 0 auto;
  padding: 0;
}
.cen {
  width: 1200px;
  margin: 0 auto;
  background-color: white;
  padding: 20px;
}
.dinglang-shang{
  background-color: red;
  height: 50px;
  margin: 0;
}
#dinglang-d1{
  float: left;
  margin-top: 12px;
  margin-left: 150px;
}
#dinglang-d2 {
  color: white;
  float: right;
  margin-top: 12px;
  margin-right: 150px;
}

</style>